<template>
  <div id="app">
    <!-- <div
        class="foot_transiton"
        @mouseenter="transDownDom"
        @mouseleave="transUpDom"
        :class="{ bindDown: hoverStatus }"
      >
        <div class="line"></div>
        <div class="cont">
          <img
            src=""
            alt=""
          />
        </div>
        <div class="cont_bottom"></div>
      </div> -->
    
    <div class="all">
      
      <div class="content">
       
        <div class="contLeft">
          <el-carousel
            :interval="4000"
            type="card"
            change="change()"
            arrow="hover"
            loop="loop"
            height="30rem"
          >
            <el-carousel-item v-for="item in imgItem" :key="item.index">
              <img :src="item.url" :alt="item.alt" :title="item.title" />
              <!-- <img src="@/assets/bn1.png" alt=""> -->
              <!-- <img src="@/assets/bn2.png" alt=""> -->
              <!-- <img src="@/assets/bn3.png" alt=""> -->
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="contright">
           <div class="createCenter">
      <router-link class="tocont" to="./home">{{$t("home.creatorsCenter")}}</router-link>
    </div>
          <div class="sologin">
            <img src="../../assets/home/title.png" alt="" />
            <p>{{$t("home.readWithYou")}}</p>
          </div>
          <!-- <div class="sologin">
            <p>与你一起，读个没完</p> -->
          <!-- <img
              style="box-sizing: border-box; width: 100%; padding: 0 40px"
              src="../../assets/1.png"
              alt=""
            /> -->
          <!-- </div> -->
          <div class="codeCentent">
            <img
            src="../../assets/home/ee.png"
            alt=""
          />
          </div>
          <div class="downloadbtn d_h_col" @click="change()">{{$t("home.ScanCodeDownloadApp")}}</div>
        </div>
        <div class="people">
          <img src="../../assets/home/people.png" alt="" />
        </div>
        <div class="peopleOther">
          <img src="../../assets/home/peopleOther.png" alt="" />
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="infoBox">
        <p>
          <a href="https://beian.miit.gov.cn" target="_blank">{{$t("home.jingICP")}}</a> {{$t("home.jingWangWen")}}
        </p>
        <p>{{$t("home.lianXunCopyright")}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      show: false,
      imgItem: [
        {
          url: require("@/assets/bn1.png"),
          id: 1,
          alt: this.$t('home.samplePicturesOne'),
          title: this.$t('home.samplePicturesOne'),
        },
        {
          url: require("@/assets/bn2.png"),
          id: 2,
          alt: this.$t('home.samplePicturesTwo'),
          title: this.$t('home.samplePicturesTwo'),
        },
        {
          url: require("@/assets/bn3.png"),
          id: 3,
          alt: this.$t('home.samplePicturesThree'),
          title: this.$t('home.samplePicturesThree'),
        },
      ],
      hoverStatus: false,
    };
  },
  methods: {
    change() {
      this.hoverStatus = !this.hoverStatus;
    },
    pull() {
      this.show = !this.show;
    },
    transDownDom() {
      this.hoverStatus = true;
    },
    // 上拉DOM
    transUpDom() {
      this.hoverStatus = false;
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped="scoped">
.codeCentent{
  text-align: center;
  img{
    width: 145px;
  }
}
.sologin {
  margin-top: 5px;
  text-align: center;
  img{
    width: 18rem;
  }
  p {
    margin-top: 5px;
    padding-left: 10px;
    font-size: 1.5rem;
    color: #4d8efb;
    letter-spacing: 0.5rem;
    text-align: center;
  }
}
::v-deep .el-carousel__item {
  box-shadow: -2px 2px 15px 5px #c5e7e6;
}
::v-deep .el-carousel--horizontal {
  padding: 20px;
  overflow-x: visible;
}
#app {
  // background: #bbfbf9;
  overflow: hidden;
  background: url(../../assets/bg.png) no-repeat;
  background-size: cover;
  position: relative;
}
@keyframes animate-cloud {
  from {
    background-position: 1200px 100%;
  }
  to {
    background-position: 0 100%;
  }
}
.foot_transiton {
  position: absolute;
  top: 0;
  right: 350px;
  z-index: 2;
  top: -380px;
  transition-duration: 3s;
  -moz-transition-duration: 3s;
  -webkit-transition-duration: 3s;
  -o-transition-duration: 3s;
  .line {
    width: 0;
    height: 190px;
    border: 1px solid #000000;
    margin: 0 auto;
  }
  .cont {
    box-sizing: border-box;
    padding: 5px;
    width: 160px;
    height: 160px;
    background: orange;
    border-radius: 0;
    img {
      width: 100%;
    }
  }
  .cont_bottom {
    border: 80px solid transparent;
    border-top: 75px solid orange;
  }
}
.foot_transiton.bindDown {
  top: 0;
}
.createCenter {
  position: absolute;
  top: -80px;
  right: 120px;
  z-index: 3;
  .tocont {
    font-size: 20px;
    font-family: Songti SC;
    font-weight: 900;
    color: #21d4cf;
    padding: 5px;
    border-bottom: 1px solid #21d4cf;
  }
}
.all {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0 auto;
  top: 45%;
  transform: translateY(-50%);
  z-index: 1;
  position: relative;
}

.foot {
  box-sizing: border-box;
  width: 100%;
  padding-top: 40px;
  height: 130px;
  text-align: center;
  background: url("../../assets/home/cloud.png") repeat-x;
  background-size: 1200px 180px;
  animation: animate-cloud 20s linear infinite;
  position: absolute;
  bottom: 0;
  .infoBox {
    a{
      color:#333
    }
    p {
      font-size: 16px;
      margin: 5px 0;
      color: #333;
    }
  }
}
.people {
  position: absolute;
  right: 120px;
  bottom: -70px;
  width: 11rem;
  img {
    width: 100%;
  }
}
.peopleOther {
  img {
    position: absolute;
    left: 1rem;
    bottom: -70px;
    width: 12rem;
    z-index: 10;
  }
}
.content {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  width: 1200px;
  margin: 0 auto;
  .contLeft {
    /* flex: 1; */
    width: 40rem;
    box-sizing: border-box;
    padding-left: 60px;

    /* background-color: #ccc; */
    .el-carousel__item {
      /* box-shadow: 3px 4px 4px 10px #F0F0F0; */
      /* background-size: cover; */
      /* width: 210px; */
      border-radius: 20px;

      img {
        width: 100%;
      }

      .Carousel {
        border-bottom: 2px solid #f1f4f8;
      }
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
      background-size: cover;
      /* width: 300px; */
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }

  .contright {
    width: 380px;
  margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    div {
      margin: 20px 0;
    }
    .downloadbtn {
      width: 145px;
      height: 49px;
      background: #21d4cf;
      border-radius: 10px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #222222;
      text-align: center;
      background-image: url(../../assets/downloabg.png);
      background-size: cover;
      cursor: pointer;
      margin: 0 auto;
    }
  }
}
</style>
